<template>
  <el-card class="visitor-statistics-card">
    <div class="card-title">
      <h3>数据趋势</h3>
      <div class="data-btn-box">
        <el-button size="mini" type="primary" @click="toggleDataSelect">切换为{{curveChartData.dataViewBtnText}}</el-button>
        <el-button class="export-btn" size="mini" type="primary" icon="el-icon-upload2" plain @click="exportData">
          导出数据
        </el-button>
      </div>
    </div>
    <div class="visitor-statistics">
      <!-- 访问人数统计数据列表 -->
      <el-table class="visitor-statistics-table" v-show="curveChartData.dataView === 'dataSheets'" :data="curveChartData.visitorStatistics" max-height="300px">
        <el-table-column prop="date" label="时间"></el-table-column>
        <el-table-column prop="views" label="访问次数"></el-table-column>
        <el-table-column prop="visits" label="访问人数"></el-table-column>
        <el-table-column prop="accessIp" label="IP数"></el-table-column>
      </el-table>
      <div id="access-curve" ref="accessCurveRef" style="width:100%;height:420px" v-show="curveChartData.dataView === 'dataCurve'"></div>
    </div>
  </el-card>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance, nextTick } from 'vue'
const { proxy } = getCurrentInstance()
import { exportExcel } from '@/utils/utils'

const props = defineProps({
  time:Array
})
const curveChartData = reactive({
  dataView: 'dataCurve', // 访问人数统计切换按钮。dataSheets为数据列表,dataCurve为数据曲线
  dataViewBtnText: '数据列表',
  visitorStatistics:[],// 访问人数统计数据
  chartName: '',
})
// 处理数据
const processingData = visitData =>{
  if(visitData){
    option.series.forEach(series => series.data = [])
    option.xAxis.data = []
    curveChartData.visitorStatistics = []
    let startTime = Date.parse(new Date(props.time[0]).toDateString())
    let endTime = Date.parse(new Date(props.time[1]).toDateString())
    for(let i = 0; i <= (endTime-startTime)/(3600 * 1000 * 24); i++){
      let date = new Date(new Date(endTime - 3600 * 1000 * 24 * i).toDateString())
      option.xAxis.data.unshift(proxy.$filter('YYYY-mm-dd',date))
    }
    option.xAxis.data.forEach(item=>{
      option.series[0].data.push(visitData[item] ? visitData[item]['访问次数'] : 0)
      option.series[1].data.push(visitData[item] ? visitData[item]['访问人数'] : 0)
      option.series[2].data.push(visitData[item] ? visitData[item]['访问ip'] : 0)
      curveChartData.visitorStatistics.push({
        date:item,
        views:visitData[item] ? visitData[item]['访问次数'] : 0,
        visits:visitData[item] ? visitData[item]['访问人数'] : 0,
        accessIp:visitData[item] ? visitData[item]['访问ip'] : 0
      })
      console.log(curveChartData.visitorStatistics)
    })
  }
}

let accessCurveCharts = null
let option = {
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  legend: {
    data: ['访问次数', '访问人数', 'IP数'],
  },
  xAxis: {
    type: 'category',
    data: [],
    boundaryGap: false,
  },
  yAxis: {
    type: 'value',
    min: 0,
    minInterval: 1
  },
  series: [
    {
      name:'访问次数',
      data: [],
      type: 'line',
      lineStyle:{
        color:'rgba(62,191,155,0.5)',
      },
      showSymbol: false,
      smooth: true,
      areaStyle:{
        color : new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
          //三种由深及浅的颜色
          [{
            offset : 0,
            color : 'rgba(62,191,155,0.3)'
          },{
            offset : 0.9,
            color : '#fff'
          }, {
            offset : 1,
            color : '#fff'
          }]),
      },
    },
    {
      name:'访问人数',
      data: [],
      type: 'line',
      showSymbol:false,
      lineStyle:{
        color:'rgba(7,102,254,0.5)',
      },
      smooth: true,
      areaStyle:{
        //渐变色实现
        color : new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
          //三种由深及浅的颜色
          [{
            offset : 0,
            color : 'rgba(7,102,254,0.3)'
          }, {
            offset : 0.9,
            color : '#fff'
          }, {
            offset : 1,
            color : '#fff'
        }]),
      },
    },
    {
      name:'IP数',
      data: [],
      type: 'line',
      showSymbol:false,
      lineStyle:{
        color:'rgba(255,169,60,0.5)',
      },
      smooth: true,
      areaStyle:{
        //渐变色实现
        color : new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
          //三种由深及浅的颜色
          [{
            offset : 0,
            color : 'rgba(255,169,60,0.3)'
          }, {
            offset : 0.9,
            color : '#fff'
          }, {
            offset : 1,
            color : '#fff'
        }]),
      },
    }
  ]
}

onMounted(() => {
  accessCurveCharts = proxy.$echarts.init(proxy.$refs.accessCurveRef, 'light')
})

const chartOption = (data,name)=>{
  processingData(data)
  curveChartData.chartName = name
  accessCurveCharts.clear()
  accessCurveCharts.setOption(option)
}
const chartResize = ()=>{
  accessCurveCharts.resize()
}

// 切换数据列表和曲线图
const toggleDataSelect = ()=>{
  if(curveChartData.dataView === 'dataCurve'){
    curveChartData.dataViewBtnText = '数据列表'
    curveChartData.dataView = 'dataSheets'
  }else if(curveChartData.dataView === 'dataSheets'){
    curveChartData.dataViewBtnText = '数据曲线'
    curveChartData.dataView = 'dataCurve'
  }
  nextTick(()=>{
    chartResize()
  })
}
// 导出数据
const exportData = ()=>{
  let excelName = `${curveChartData.chartName}-${proxy.$filter('YYYY-mm-dd',new Date(props.time[0]))}_${proxy.$filter('YYYY-mm-dd',new Date(props.time[1]))}`
  exportExcel('.visitor-statistics-table',excelName)
}
defineExpose({
  chartResize,
  chartOption
})
</script>

<style lang="less" scoped>
.visitor-statistics-card{
  &:deep(.el-card__body){
    .card-title{
      .data-btn-box{
        display: flex;
        .export-btn{
          font-size: 14px;
        }
      }
    }
    .el-radio-group{
      margin: 30px 0;
      float: right;
    }
    .visitor-statistics{
      margin-top: 30px;
    }
  }
}
</style>
